<!--<template>-->
<!--  <div>-->
<!--    <el-dialog-->
<!--        title="搜索"-->
<!--        :visible.sync="searchShow"-->
<!--        width="25%"-->
<!--    >-->
<!--      <el-form label-width="80px" >-->
<!--        <el-form-item label="客户名">-->
<!--          <el-input v-model="searchName"   size="small" ></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="经营范围">-->
<!--          <el-input  v-model="searchRange"  size="small"></el-input>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <el-button icon="el-icon-search" style="margin-left: 69%" @click="search">搜索</el-button>-->
<!--    </el-dialog>-->
<!--    <el-dialog-->
<!--        title="添加客户信息"-->
<!--        :visible.sync="addShow"-->
<!--        width="25%"-->
<!--    >-->
<!--      <el-form label-width="100px" >-->
<!--        <el-form-item label="客户名称">-->
<!--          <el-input v-model="addName" size="small" ></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="负责人">-->
<!--          <el-input  v-model="addManager" size="small"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="负责人电话">-->
<!--          <el-input  v-model="addPhone"  size="50"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="办公地址">-->
<!--          <el-input v-model="addAddress"  size="50"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="邮箱">-->
<!--          <el-input  v-model="addEmail"  size="50"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="经营范围">-->
<!--          <el-input type="textarea" v-model="addRange"  size="50"></el-input>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <el-button type="primary" icon="el-icon-edit" style="margin-left: 50%" @click="addClient">添加</el-button>-->
<!--    </el-dialog>-->

<!--    <el-dialog-->
<!--        title="修改客户信息"-->
<!--        :visible.sync="updateShow"-->
<!--        width="25%"-->
<!--    >-->
<!--      <el-form label-width="100px" >-->
<!--        <el-form-item label="客户名称">-->
<!--          <el-input v-model="clientName" size="small" disabled ></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="负责人">-->
<!--          <el-input v-model="clientManager" :value="clientManager" size="small"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="负责人电话">-->
<!--          <el-input v-model="clientPhone" :value="clientManager" size="small" ></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="办公地址">-->
<!--          <el-input v-model="clientAddress" size="small" disabled></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="邮箱">-->
<!--          <el-input type="textarea" v-model="clientEmail" size="small" disabled></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="经营范围">-->
<!--          <el-input type="textarea" v-model="clientRange" size="small" disabled></el-input>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <el-button type="primary" icon="el-icon-edit" style="margin-left: 50%" @click="update(clientManager,clientPhone)">修改</el-button>-->
<!--    </el-dialog>-->

<!--    <el-dialog-->
<!--        title="客户信息"-->
<!--        :visible.sync="findShow"-->
<!--        width="25%"-->
<!--    >-->
<!--      <el-form label-width="100px" >-->
<!--        <el-form-item label="客户名称">-->
<!--          <el-input v-model="clientName" size="small" disabled  ></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="负责人">-->
<!--          <el-input v-model="clientManager" size="small" disabled></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="负责人电话">-->
<!--          <el-input v-model="clientPhone" size="small" disabled ></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="办公地址">-->
<!--          <el-input v-model="clientAddress" size="small" disabled></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="办公地址">-->
<!--          <el-input v-model="clientEmail" size="small" disabled></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="经营范围">-->
<!--          <el-input type="textarea" v-model="clientRange" size="small" disabled ></el-input>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--    </el-dialog>-->

<!--    <el-row>-->
<!--      <el-col :span="24">-->
<!--        <div class="grid-content bg-purple-dark">-->
<!--          <h3>客户管理</h3>-->
<!--          <el-button type="primary" icon="el-icon-search" size="medium " @click="searchWind">搜索</el-button>-->
<!--          <el-button type="primary" icon="el-icon-plus" size="medium " @click="addWind">添加</el-button>-->
<!--          <el-button type="primary" icon="el-icon-search" size="medium " @click="showWind">查看</el-button>-->
<!--          <el-button type="primary" icon="el-icon-edit" size="medium " @click="updateWind">修改</el-button>-->
<!--        </div></el-col>-->
<!--    </el-row>-->
<!--    <el-row>-->
<!--      <el-col :span="24"><div class="grid-content bg-purple-dark">-->
<!--        <el-table-->
<!--            :data="tableData"-->
<!--            highlight-current-row-->
<!--            @current-change="handleCurrentChange"-->
<!--            style="width: 100%">-->
<!--          <el-table-column-->
<!--              prop="clientName"-->
<!--              label="客户名称"-->
<!--              align="center"-->
<!--          >-->
<!--          </el-table-column>-->

<!--          <el-table-column-->
<!--              prop="clientManager"-->
<!--              label="负责人"-->
<!--              align="center"-->
<!--          >-->
<!--          </el-table-column>-->

<!--          <el-table-column-->
<!--              prop="clientRange"-->
<!--              label="经营范围"-->
<!--              align="center">-->
<!--          </el-table-column>-->
<!--        </el-table>-->
<!--      </div>-->
<!--      </el-col>-->
<!--    </el-row>-->


<!--    <el-row>-->
<!--      <el-col :span="24"><div class="grid-content bg-purple-dark">-->
<!--        <div class="block">-->
<!--          <el-pagination-->
<!--              background-->
<!--              layout="total, sizes, prev, pager, next, jumper"-->
<!--              :total="total"-->
<!--              :page-size="pageSize"-->
<!--              @size-change="handleSizeChange"-->
<!--              :page-sizes="[5, 10]"-->
<!--              :current-page="currentPage"-->
<!--              @current-change="currentPageFn">-->
<!--          </el-pagination>-->
<!--        </div>-->
<!--      </div></el-col>-->
<!--    </el-row>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  name: "Client",-->
<!--  data(){-->
<!--    return{-->
<!--      total:0, //总行数-->
<!--      pageSize:5,//每页显示的行数-->
<!--      currentPage:1, //当前页-->
<!--      tableData: [], //分页后的集合-->
<!--      searchShow:false,-->
<!--      updateShow:false,-->
<!--      addShow:false,-->
<!--      findShow:false,-->
<!--      id:'',-->
<!--      clientName:'',-->
<!--      clientPhone:'',-->
<!--      clientManager:'',-->
<!--      clientAddress:'',-->
<!--      clientRange:'',-->
<!--      clientEmail:'',-->
<!--      searchName:'',-->
<!--      searchRange:'',-->
<!--      addName:'',-->
<!--      addManager:'',-->
<!--      addPhone:'',-->
<!--      addAddress:'',-->
<!--      addRange:'',-->
<!--      addEmail:'',-->
<!--      updateName:'',-->
<!--      updateManager:'',-->
<!--      updatePhone:'',-->
<!--      updateAddress:'',-->
<!--      updateRange:''-->
<!--    }-->
<!--  },-->
<!--  mounted(){-->
<!--    this.init()-->
<!--  },-->
<!--  methods:{-->
<!--    handleCurrentChange(val){-->
<!--      this.id=val.id-->
<!--      this.clientName=val.clientName-->
<!--      this.clientPhone=val.clientPhone-->
<!--      this.clientManager=val.clientManager-->
<!--      this.clientAddress=val.clientAddress-->
<!--      this.clientEmail=val.clientEmail-->
<!--      this.clientRange=val.clientRange-->

<!--    },-->
<!--    async addClient(){-->
<!--      let param = new FormData();-->
<!--      param.append('clientName',this.addName);-->
<!--      param.append('clientManager',this.addManager);-->
<!--      param.append('clientPhone',this.addPhone);-->
<!--      param.append('ClientAddress',this.addAddress);-->
<!--      param.append('clientEmail',this.addEmail);-->
<!--      param.append('clientRange',this.addRange);-->
<!--      let obj ;-->
<!--      await this.axios.post('/api/client/add',param).then(-->
<!--          r=>{-->
<!--            obj = r.data;-->
<!--          }-->
<!--      );-->
<!--      if(obj.code === 0){-->
<!--        this.$message.success(obj.info)-->
<!--        this.init()-->
<!--        this.addShow=false-->
<!--        this.addName=''-->
<!--        this.addManager=''-->
<!--        this.addPhone=''-->
<!--        this.addAddress=''-->
<!--        this.addRange=''-->
<!--        this.addEmail=''-->
<!--      }else {-->
<!--        this.$message.error(obj.info)-->
<!--      }-->
<!--      //添加-->
<!--    }-->
<!--    ,-->
<!--    async update(clientManager,clientPhone){-->
<!--      let param = new FormData();-->
<!--      param.append('id',this.id);-->
<!--      param.append('clientName',this.clientName);-->
<!--      param.append('clientManager',clientManager);-->
<!--      param.append('clientPhone',clientPhone);-->
<!--      param.append('clientAddress',this.clientAddress);-->
<!--      param.append('clientEmail',this.clientEmail);-->
<!--      param.append('clientRange',this.clientRange);-->
<!--      let obj-->
<!--      await this.$axios.put('/api/client/update',param).then(-->
<!--          r=>{-->
<!--            obj = r.data-->
<!--          })-->
<!--      if(obj.code === 0){-->
<!--        this.$message.success(obj.info)-->
<!--        this.init()-->
<!--        this.updateShow=false-->
<!--      }else {-->
<!--        this.$message.error(obj.info)-->
<!--      }-->
<!--    },-->
<!--    search(){-->
<!--      this.init()-->
<!--      this.searchShow=false //关闭弹出窗口-->
<!--    },-->
<!--    addWind(){-->
<!--      this.addShow=true-->
<!--    }-->
<!--    ,-->
<!--    searchWind(){-->
<!--      this.searchShow=true-->
<!--    },-->
<!--    showWind(){-->
<!--      if(this.id==''){-->
<!--        this.$message.warning('请选择行')-->
<!--        return-->
<!--      }-->
<!--      this.findShow=true-->
<!--    },-->
<!--    updateWind(){-->
<!--      //打开添加修改弹出框-->
<!--      if(this.id==''){-->
<!--        this.$message.warning('请选择行')-->
<!--        return-->
<!--      }-->
<!--      this.updateShow=true-->
<!--    },-->
<!--    handleSizeChange(pageSize) {-->
<!--      this.pageSize = pageSize-->
<!--      this.init()-->
<!--    },-->
<!--    currentPageFn(currentPage){-->
<!--      this.currentPage=currentPage-->
<!--      this.init()-->
<!--    },-->
<!--    init(){-->
<!--      let param = {-->
<!--        pn:this.currentPage,-->
<!--        pageSize:this.pageSize,-->
<!--        name:this.searchName,-->
<!--        range:this.searchRange-->
<!--      }-->
<!--      this.$axios.get('/api/client/findByItem',{params:param}).then(-->
<!--          r=>{-->
<!--            let obj = r.data-->
<!--            this.tableData =obj.list-->
<!--            this.total = obj.total-->
<!--          }-->
<!--      )-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->

<!--</style>-->
<template>
  <div>
    <el-dialog
        title="搜索"
        :visible.sync="searchShow"
        width="25%"
    >
      <el-form label-width="80px" >
        <el-form-item label="客户名">
          <el-input v-model="searchName"   size="small" ></el-input>
        </el-form-item>
        <el-form-item label="经营范围">
          <el-input  v-model="searchRange"  size="small"></el-input>
        </el-form-item>
      </el-form>
      <el-button icon="el-icon-search" style="margin-left: 69%" @click="search">搜索</el-button>
    </el-dialog>
    <el-dialog
        title="添加客户信息"
        :visible.sync="addShow"
        width="25%"
    >
      <el-form label-width="100px" >
        <el-form-item label="客户名称">
          <el-input v-model="addName" size="small" ></el-input>
        </el-form-item>
        <el-form-item label="负责人">
          <el-input  v-model="addManager" size="small"></el-input>
        </el-form-item>
        <el-form-item label="负责人电话">
          <el-input v-model="addPhone" size="small"></el-input>
        </el-form-item>
        <el-form-item label="办公地址">
          <el-input v-model="addAddress" size="small"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="addEmail" size="small"></el-input>
        </el-form-item>
        <el-form-item label="经营范围">
          <el-input type="textarea" v-model="addRange"  size="50"></el-input>
        </el-form-item>
        <!--         <el-form-item label="上映时间">-->
        <!--           <el-date-picker-->
        <!--               v-model="movieDate"-->
        <!--               type="datetime"-->
        <!--               placeholder="选择日期时间">-->
        <!--           </el-date-picker>-->
        <!--         </el-form-item>-->
      </el-form>
      <el-button type="primary" icon="el-icon-edit" style="margin-left: 50%" @click="addClient">添加</el-button>
    </el-dialog>

    <el-dialog
        title="修改客户信息"
        :visible.sync="updateShow"
        width="25%"
    >
      <el-form label-width="100px" >
        <el-form-item label="客户名称">
          <el-input v-model="clientName" size="small" disabled ></el-input>
        </el-form-item>
        <el-form-item label="负责人">
          <el-input  v-model="clientManager" :value="clientManager" size="small"></el-input>
        </el-form-item>
        <el-form-item label="负责人电话">
          <el-input v-model="clientPhone" :value="clientManager" size="small" ></el-input>
        </el-form-item>
        <el-form-item label="办公地址">
          <el-input v-model="clientAddress" size="small" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="clientEmail" size="small" disabled></el-input>
        </el-form-item>
        <el-form-item label="经营范围">
          <el-input type="textarea" v-model="clientRange"  size="small" disabled></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" icon="el-icon-edit" style="margin-left: 50%" @click="update(clientManager,clientPhone)">修改</el-button>
    </el-dialog>

    <el-dialog
        title="客户信息"
        :visible.sync="findShow"
        width="25%"
    >
      <el-form label-width="100px" >
        <el-form-item label="客户名称">
          <el-input v-model="clientName" size="small" disabled  ></el-input>
        </el-form-item>
        <el-form-item label="负责人">
          <el-input  v-model="clientManager" size="small" disabled></el-input>
        </el-form-item>
        <el-form-item label="负责人电话">
          <el-input v-model="clientPhone" size="small" disabled ></el-input>
        </el-form-item>
        <el-form-item label="办公地址">
          <el-input v-model="clientAddress" size="small"  disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="clientEmail" size="small" disabled></el-input>
        </el-form-item>
        <el-form-item label="经营范围">
          <el-input type="textarea" v-model="clientRange"  size="small" disabled ></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <h2>客户管理</h2>
          <el-button type="primary" icon="el-icon-search" size="medium " @click="searchWind">搜索</el-button>
          <el-button type="primary" icon="el-icon-plus" size="medium " @click="addWind">添加</el-button>
          <el-button type="primary" icon="el-icon-search" size="medium " @click="showWind">查看</el-button>
          <el-button type="primary" icon="el-icon-edit" size="medium " @click="updateWind">修改</el-button>
        </div></el-col>
    </el-row>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark">
        <el-table
            :data="tableData"
            highlight-current-row
            @current-change="handleCurrentChange"
            style="width: 100%">
          <el-table-column
              prop="clientName"
              label="客户名称"
              align="center"
          >
          </el-table-column>
          <el-table-column
              prop="clientManager"
              label="负责人"
              align="center"
          >
          </el-table-column>
          <el-table-column
              prop="clientRange"
              label="经营范围"
              align="center">
          </el-table-column>
        </el-table>
      </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark">
        <div class="block">
          <el-pagination
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              :page-size="pageSize"
              @size-change="handleSizeChange"
              :page-sizes="[5, 10]"
              :current-page="currentPage"
              @current-change="currentPageFn">
          </el-pagination>
        </div>
      </div></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Client",
  data(){
    return{
      total:0, //总行数
      pageSize:5,//每页显示的行数
      currentPage:1, //当前页
      tableData: [], //分页后的集合
      searchShow:false,
      updateShow:false,
      addShow:false,
      findShow:false,
      id:'',
      clientName:'',
      clientPhone:'',
      clientManager:'',
      clientAddress:'',
      clientEmail:'',
      clientRange:'',
      searchName:'',
      searchRange:'',
      addName:'',
      addManager:'',
      addPhone:'',
      addAddress:'',
      addEmail:'',
      addRange:'',
      updateName:'',
      updateManager:'',
      updatePhone:'',
      updateAddress:'',
      updateRange:''
    }
  },
  mounted(){
    this.init()
  },
  methods:{
    handleCurrentChange(val){
      this.id=val.id
      this.clientName=val.clientName
      this.clientPhone=val.clientPhone
      this.clientManager=val.clientManager
      this.clientAddress=val.clientAddress
      this.clientRange=val.clientRange
      this.clientEmail = val.clientEmail
    },
    async addClient(){
      let param = new FormData();
      param.append('clientName',this.addName);
      param.append('clientManager',this.addManager);
      param.append('clientPhone',this.addPhone);
      param.append('clientAddress',this.addAddress);
      param.append('clientRange',this.addRange);
      param.append('clientEmail',this.addEmail);
      let obj ;
      await this.axios.post('/api/client/add',param).then(
          r=>{
            obj = r.data;
          }
      );
      if(obj.code === 0){
        this.$message.success(obj.info)
        this.init()
        this.addShow=false
        this.addName=''
        this.addManager=''
        this.addPhone=''
        this.addAddress=''
        this.addEmail=''
        this.addRange=''
      }else {
        this.$message.error(obj.info)
      }
      //添加
    }
    ,
    async update(clientManager,clientPhone){
      let param = new FormData();
      param.append('id',this.id);
      param.append('clientName',this.clientName);
      param.append('clientManager',clientManager);
      param.append('clientPhone',clientPhone);
      param.append('clientAddress',this.clientAddress);
      param.append('clientEmail',this.clientEmail);
      param.append('clientRange',this.clientRange);
      let obj
      await this.$axios.put('/api/client/update',param).then(
          r=>{
            obj = r.data
          })
      if(obj.code === 0){
        this.$message.success(obj.info)
        this.init()
        this.updateShow=false
      }else {
        this.$message.error(obj.info)
      }
    },
    search(){
      this.init()
      this.searchShow=false //关闭弹出窗口
    },
    addWind(){
      this.addShow=true
    }
    ,
    searchWind(){
      //打开搜索弹出框
      // this.movieName =  this.$store.state.movieId
      this.searchShow=true
    },
    showWind(){
      if(this.id==''){
        this.$message.warning('请选择行')
        return
      }
      this.findShow=true
    },
    updateWind(){
      //打开添加修改弹出框
      if(this.id==''){
        this.$message.warning('请选择行')
        return
      }
      this.updateShow=true
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.init()
    },
    currentPageFn(currentPage){
      this.currentPage=currentPage
      this.init()
    },
    init(){
      let param = {
        page:this.currentPage,
        pageSize:this.pageSize,
        name:this.searchName,
        range:this.searchRange
      }
      this.$axios.get('/api/client/findByItem',{params:param}).then(
          r=>{
            let obj = r.data
            // console.log(obj)
            this.tableData =obj.list
            this.total = obj.total
          }
      )
    }
  }
}
</script>

<style scoped>

</style>
